{% extends "SalarySysMenu/Main.html" %}
{% load staticfiles %}

{% block CSSAnotherhead %}
<link rel="stylesheet" href="{% static 'plugins/timepicker/bootstrap-timepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'%}">
<style>
  .remodal-bg.with-red-theme.remodal-is-opening,
  .remodal-bg.with-red-theme.remodal-is-opened {
    filter: none;
  }

  .remodal-overlay.with-red-theme {
    background-color: #f44336;
  }

  .remodal.with-red-theme {
    background: #fff;
  }
</style>
{% endblock %}
{% block bodyhead %}
<body class="hold-transition skin-purple-light sidebar-mini" onload="initPage()">
  
  {% endblock %}
  {% block loadJSfirst %}
   
  <script>

  function checkhour1time(){  
  var hour1 = document.getElementById('hourtime1').value;
  if(hour1>=0 && hour1<25){     
    document.getElementById("inputError1").style.display = "none";
    document.getElementById("998877zc").disabled = false;  
  }else{
document.getElementById("inputError1").style.display = "inline";
    document.getElementById("998877zc").disabled = true;
  }
  }
  function checkhour2time(){  
  var hour2 = document.getElementById('hourtime2').value;
  if(hour2>=0 && hour2<25){     
    document.getElementById("inputError3").style.display = "none";
    document.getElementById("998877zc").disabled = false;  
  }else{
document.getElementById("inputError3").style.display = "inline";
    document.getElementById("998877zc").disabled = true;
  }
  }
  function checkmin1time(){  
  var min = document.getElementById('mintime1').value;
  if(min>=0 && min<60){     
    document.getElementById("inputError2").style.display = "none";
    document.getElementById("998877zc").disabled = false;  
  }else{
document.getElementById("inputError2").style.display = "inline";
    document.getElementById("998877zc").disabled = true;
  }
  }
  function checkmin2time(){  
  var min = document.getElementById('mintime2').value;
  if(min>=0 && min<60){     
    document.getElementById("inputError4").style.display = "none";
    document.getElementById("998877zc").disabled = false;  
  }else{
document.getElementById("inputError4").style.display = "inline";
    document.getElementById("998877zc").disabled = true;
  }
  }

    </script>
{% endblock %}
{% block MyReport %}
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-hand-paper-o"></i>
            <span> 业务申报登记</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="{% url 'GZGL:ReportWorking' %}"><i class="fa  fa-circle-o"></i> <span> 业绩申报</span></a></li> 
              <li ><a href="{% url 'GZGL:ReportSalary' %}"><i class="fa fa-circle-o"></i> 工资异常申报</a></li>
              <li class="active"><a href="#"><i class="fa fa-circle-o"></i> 考勤异常申报</a></li>
              <li><a href="{% url 'GZGL:ReportOther' %}"><i class="fa fa-circle-o"></i> 其他异常申报</a></li>
          </ul>
        </li>  
        {% endblock %}

        {% block content %}
         <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        业务申报
        <small>考勤异常申报</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>

    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        | Your Page Content Here |
        -------------------------->
        <div class="col-md-8">
            <!-- general form elements -->
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">业务申报单（考勤异常单）</h3>
              </div>
              <!-- /.box-header -->
              <!-- form start -->
              <form role="form" method="POST" action="{% url 'GZGL:ReportSign' %}">{% csrf_token %}
                  <input type="hidden" name="showtype" id="exampleID" value="new">
                <div class="box-body">
                  <div class="form-group col-xs-4">
                    <label for="exampleID">业务申报类型</label>                    
                    <input type="text" class="form-control" id="exampleID" value="考勤异常申报" disabled>
                    <input type="hidden" name="type" class="form-control" id="exampleID" value="考勤异常申报" >
                    </div>
                    <div class="form-group col-xs-4">
                        <label for="exampleID">考勤代码</label>                    
                        <input type="text" class="form-control" id="exampleID" value="{{signcode}}" disabled>
                        <input type="hidden" name="signcode" class="form-control" id="signcode" value="{{signcode}}" >
                        </div>
                  <div class="form-group col-xs-4">
                    <label for="exampleID">您的员工ID</label>                    
                    <input type="text" name="reportid" class="form-control" id="exampleID" placeholder="您的员工ID" value="{{here.staff_id}}" required>
                    </div>
                  <div class="form-group col-xs-4">
                    <label for="exampleInputname">您的姓名</label>
                    <input type="text" name="reportname" class="form-control" id="examplename" placeholder="您的姓名" value="{{here.staff_name}}" required>
                    </div>
                  <div class="form-group col-xs-4">
                          <label>异常类型</label>
                          <select name="reportdetailtype" class="form-control">
                            <option>下班未按时签到</option>
                            <option>系统考勤异常</option>
                          </select>                       
                    </div>

                    <div class="form-group col-xs-4">
                      <label for="inputBirthday">异常时间</label>
                        <div class="input-group date">
                          <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                          </div>
                          <input type="text" name="reportdate" class="form-control pull-right" id="datepicker" value="{{signdate}}" placeholder="异常时间" required>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="exampleInputname">当日上班时间</label>                     
                        <label id="inputError1" style="display:none;color:#dd4b39;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-times-circle"></i>小时格式不符(0-24)</label>
                            <label id="inputError2" style="display:none;color:#dd4b39;">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-times-circle"></i>分针格式不符(0-60)</label>
                        <div class="input-group">
                        <input type="text" name="inhour" class="form-control" id="hourtime1" onkeyup="checkhour1time();" data-inputmask='"mask": "99"' data-mask >
                        
                        <span class="input-group-addon">:</span>
                        <input type="text" name="inmin" class="form-control" id="mintime1" onkeyup="checkmin1time();" data-inputmask='"mask": "99"' data-mask > 

                      </div>
                      
                    </div>
                    <div class="form-group col-xs-6">
                      <label for="exampleInputname">当日下班时间</label>
                      <label id="inputError3" style="display:none;color:#dd4b39;">
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-times-circle"></i>小时格式不符(0-24)</label>
                          <label id="inputError4" style="display:none;color:#dd4b39;">
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-times-circle"></i>分针格式不符(0-60)</label>
                      <div class="input-group">
                      <input type="text" name="outhour" class="form-control" id="hourtime2" onkeyup="checkhour2time();" data-inputmask='"mask": "99"' data-mask>
                      <span class="input-group-addon">:</span>
                      <input type="text" name="outmin" class="form-control" id="mintime2" onkeyup="checkmin2time();" data-inputmask='"mask": "99"' data-mask>

                    </div>
                  </div>
      
 
                    
                   


                  <div class="form-group col-xs-12">
                      <label>考勤异常描述</label>
                      <textarea class="form-control" rows="3" name="details" required></textarea>
                    </div>
                  <div class="form-group col-xs-12">
                      <label>备  注</label>
                      <textarea class="form-control" rows="3" name="backup" ></textarea>
                    </div>



                </div>
                <!-- /.box-body -->
  
                <div class="box-footer">
                    <button type="reset" class="btn btn-default">重置</button>
                  <button type="submit" class="btn btn-primary pull-right" id="998877zc">提交</button>
                </div>
              </form>
            </div>
            <!-- /.box -->
          </div> 
          
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
        {% endblock %}
        {% block JSFile %}
       <!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js'%}" type="text/javascript"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js'%}" type="text/javascript" ></script>
<script src="{% static 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'%}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js'%}" type="text/javascript"></script>
<script src="{% static 'plugins/input-mask/jquery.inputmask.js'%}"></script>
<script src="{% static 'plugins/timepicker/bootstrap-timepicker.min.js'%}"></script>


<script src="{% static 'bower_components/bootstrap-daterangepicker/daterangepicker.js'%}"></script>
<script src="{% static 'js/remodal.js'%}" type="text/javascript" ></script>


<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
     <script>
      $(function () {
          //Initialize Select2 Elements
       
      
          //Datemask dd/mm/yyyy
          $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
      
          //Money Euro
          $('[data-mask]').inputmask()
      
          //Date picker
          $('#datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true
      
          })
      
      
        })
          </script>
          <script>
              $(document).on('opening', '.remodal', function () {
                console.log('opening');
              });
            
              $(document).on('opened', '.remodal', function () {
                console.log('opened');
              });
            
              $(document).on('closing', '.remodal', function (e) {
                console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
              });
            
              $(document).on('closed', '.remodal', function (e) {
                console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
              });
            
              $(document).on('confirmation', '.remodal', function () {
                console.log('confirmation');
              });
            
              $(document).on('cancellation', '.remodal', function () {
                console.log('cancellation');
              });
            
            </script>
                {% endblock %}
